<template>
	<view class="goodsInfo">
		<!-- 	<uni-search-bar style="background-color: #fff;" @confirm="search" v-model="queryParam.NameorCode"
			@cancel="cancel">
		</uni-search-bar> -->
		<view class="container">
			<view class="left">
				<view :class="current==index?'leftItem active':'leftItem'" v-for="item,index in IndustryList"
					:key="item.Id" @click="changeType(index,item)">
					{{item.industryName}}
				</view>
			</view>
			<view class="right">
				<!-- 商品内容 -->
				<uni-list>
					<uni-list-item v-for="item in TypeList" :key="item.Id" :title="item.Name">
						<template v-slot:footer>
							<checkbox-group @change="checkboxChangeItem($event,item)">
								<checkbox :checked="item.Checked" />
							</checkbox-group>
						</template>
					</uni-list-item>
				</uni-list>
			</view>
		</view>
		<!-- 底部导航栏 -->
		<view class="tabbar">
			<view class="all">
				<checkbox-group @change="checkboxChangeAll">
					<checkbox :checked="isAllChecked" />全选
				</checkbox-group>
			</view>
			<view class="submitOrder" @click="submit">
				完成复制
			</view>
		</view>
	</view>
</template>

<script>
	// 引入加载更多
	import uniLoadMore from '@/components/uni-load-more.vue'
	import {
		momenyFormat
	} from '@/util/util.js'
	export default {
		components: {
			uniLoadMore
		},
		data() {
			return {
				// 加载状态
				status: "noMore",
				//全选是否选中
				isAllChecked: false, //是否全选
				// 行业分类列表数据
				IndustryList: [],
				// 行业分类下的所有产品分类列表数据
				TypeList: [],
				pagination: {
					PageIndex: 1,
					PageRows: 30,
					SortField: "Id",
					SortType: "desc",
				},
				queryParams: {},
				Total: 0,
				current: 0,
				// 存储选中好的行业和分类商品数据
				selectList: [],
				CompanyInfo: ''
			}
		},
		onLoad() {
			this.status = "loading"
			this.CompanyId = uni.getStorageSync('CompanyInfo').Id
			this.getIndustryList()
		},
		methods: {
			// 行选择
			checkboxChangeItem(e, item) {
				// 临时缓存至行业下
				if (!this.IndustryList[this.current].subData) this.IndustryList[this.current].subData = []
				if (e.detail.value.length > 0) {
					this.$set(item, 'Checked', true)
					this.IndustryList[this.current].subData.push(item)
				} else {
					let idx = this.IndustryList[this.current].subData.findIndex(im => im.Id == item.Id)
					this.IndustryList[this.current].subData.splice(idx, 1)
					this.$set(item, 'Checked', false)
				}
				console.log(this.IndustryList[this.current]);
			},
			// 全选
			checkboxChangeAll(e) {
				if (e.detail.value.length > 0) {
					this.IndustryList[this.current].subData = [...this.TypeList]
					this.TypeList.forEach(item => {
						this.$set(item, 'Checked', true)
					})
				} else {
					this.IndustryList[this.current].subData = []
					this.TypeList.forEach(item => {
						this.$set(item, 'Checked', false)
					})
				}
			},
			// 查询
			search() {
				if (this.typeData.length <= 0) return uni.showToast({
					icon: 'none',
					title: '请先添加分类'
				})
				this.getDataList(this.typeData[this.current].Id)
			},
			cancel() {
				this.queryParam.Keyword = ''
				if (this.typeData.length > 0) this.getDataList(this.typeData[this.current].Id)
			},
			// 左侧点击
			changeType(index, item) {
				this.current = index
				this.getTypeList(this.IndustryList[this.current].Id)
			},
			// 左侧列表
			getIndustryList() {
				this.$http('post', '/BO/InDustry/GetDataList', {
					"PageIndex": 1,
					"PageRows": 9999,
					Search: {
						CommpayId: uni.getStorageSync('CompanyInfo').Id
					}
				}).then(res => {
					if (res.Success) {
						this.IndustryList = res.Data
						if (this.IndustryList.length > 0) {
							this.getTypeList()
						}
					}
				})
			},
			// 右侧数据
			getTypeList() {
				this.$http('post', '/BO/InventTypeDustry/GetDataList', {
					...this.pagination,
					Search: {
						Condition: 'Id',
						Keyword: this.IndustryList[this.current].Id
					}
				}).then(res => {
					if (res.Success) {
						let arr = this.IndustryList[this.current].subData
						if (arr && arr.length > 0) {
							res.Data.forEach(item => {
								if (arr.findIndex(im => item.Id == im.Id) !== -1) item.Checked = true
							})
							this.TypeList = res.Data
						} else {
							this.TypeList = res.Data
						}
						this.Total = res.Total
					}
				})
			},
			// 保存
			submit() {
				let arr = this.IndustryList.filter(item => item.subData && item.subData.length > 0)
				if (arr.length <= 0) return this.$api.msg('请选择商品分类')
				// 接收处理后的数组
				let invents = []
				arr.forEach(item => {
					item.subData.forEach(im => {
						invents.push({
							"Id": im.Id,
							"Name": im.Name,
							"IndustryId":im.IndustryId,
							"CompanyId": this.CompanyId,
							"IndustryName": item.industryName,
						})
					})
				})
				this.$http('post', '/BO/InventType/AddTypeList', invents).then(res => {
					if (res.Success) {
						this.$api.msg('操作成功')
						setTimeout(() => {
							uni.navigateBack()
						}, 1000)
					} else this.$api.msg(res.Msg)
				})
			},
			momenyFormat(num) {
				return momenyFormat(num)
			}
		}
	}
</script>

<style scoped lang="scss">
	.goodsInfo {
		display: flex;
		flex-direction: column;
		height: 100%;

		.container {
			display: flex;
			background-color: #fff;
			height: calc(100% - 120rpx);

			.left {
				width: 100px;
				background-color: #f5f5f5;
				text-align: center;
				overflow-y: scroll;

				.leftItem {
					line-height: 2.5;
					font-weight: 600;
					color: #999;
					font-size: 15px;
				}

				.active {
					color: #000;
					background-color: #fff;
				}
			}

			.right {
				flex: 1;
				overflow-y: scroll;
				max-height: 100%;
			}
		}

		// 底部导航
		.tabbar {
			display: flex;
			width: 100%;
			height: 120rpx;
			padding: 0 30rpx;
			box-sizing: border-box;
			background-color: #ffffff;
			position: fixed;
			bottom: 0;
			border-top: 1px solid #E0E0E0;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.submitOrder {
				width: 208rpx;
				height: 80rpx;
				background-image: linear-gradient(to right, #38FFCB, #2979FF);
				border-radius: 60rpx;
				font-size: 30rpx;
				font-weight: bold;
				color: #FFFFFF;
				letter-spacing: 2.57rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
</style>